<template>
    <div>
        <div class="Onlineypsq_Box" @click="openSampleDialog">
            <div class="Onlineypsq_sq">
                <a class="shiyong">样品
                <br/>申请</a>
            </div>
        </div>
        <el-dialog
            title="样品、试用品申请"
            :visible.sync="dialogSqVisible"
            :close-on-click-modal="false"
            width="42%"
            top="2%">
            <div class="dialog-content">
                <el-form ref="form" :model="form" status-icons :show-message="false" label-width="25%" label-position="left">
                    <el-form-item label="申请类型" required prop="type">
                        <el-select v-model="form.type" placeholder="请选择申请类型">
                            <el-option :label="item" :value="item" v-for="(item, index) in applyType" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生产企业" required prop="factory_id">
                        <el-select v-model="form.factory_id" placeholder="请选择生产企业" @change="switchFactory">
                            <el-option :label="item.name" :value="item.id" v-for="(item, index) in customFactory" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品名称" required prop="goods_id" ref="goods_id">
                        <el-select v-model="form.goods_id"  placeholder="请选择或输入产品名称" @change="switchGoods">
                            <el-option :label="item.title" :value="item.id" v-for="(item, index) in customGoods" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品型号" prop="goods_models" ref="goods_models">
                        <el-input v-model="form.goods_models" disabled placeholder="选择产品后对应生成"></el-input>
                    </el-form-item>
                    <el-form-item label="产品规格" required prop="goods_sku_id" ref="goods_sku_id">
                        <el-select v-model="form.goods_sku_id" placeholder="请选择或输入产品规格">
                            <el-option :label="item.difference" :value="item.id" v-for="(item, index) in customSku" :key="index"></el-option>
                            <!-- <el-option label="名称二" value="beijing"></el-option> -->
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品备注" prop="goods_remark">
                        <el-input type="textarea" v-model="form.goods_remark" placeholder="请填写产品备注"></el-input>
                    </el-form-item>
                    <el-form-item label="数量" prop="goods_num">
                        <el-input-number v-model="form.goods_num" :min="1" label="描述文字" ></el-input-number>
                    </el-form-item>
                    <el-form-item label="收货地址" prop="province_id" required>
                        <el-select v-model="form.province_id" placeholder="省/直辖市" @change="ProvinceChangeHandler">
                            <el-option 
                                v-for="(item,index) in provinceList"
                                :key="index"
                                :label="item.province_name" 
                                :value="item.province_id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="city_id" ref="city_id" label-width="10px" required>
                        <el-select v-model="form.city_id" placeholder="市" @change="CityChangeHandler">
                            <el-option 
                                v-for="(item,index) in addAddressCityList"
                                :key="index"
                                :label="item.city_name" 
                                :value="item.city_id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="county_id" ref="county_id" required>
                        <el-select v-model="form.county_id" placeholder="区/县" @change="CountyChangeHandler">
                            <el-option 
                                v-for="(item,index) in addAddressCountyList"
                                :key="index"
                                :label="item.county_name" 
                                :value="item.county_id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="town_id" ref="town_id" label-width="10px" required>
                        <el-select v-model="form.town_id"  placeholder="乡镇/街道">
                            <el-option 
                                v-for="(item,index) in addAddressTownList"
                                :key="index"
                                :label="item.town_name" 
                                :value="item.town_id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="收货地址" required>
                        <el-select v-model="form.sheng" placeholder="省/直辖市" class="sheng">
                            <el-option label="省/直辖市" value=""></el-option>
                            <el-option label="陕西" value=""></el-option>
                        </el-select>
                        <el-select v-model="form.shi" placeholder="市" class="shi">
                            <el-option label="市" value=""></el-option>
                            <el-option label="西安" value=""></el-option>
                        </el-select>
                        <el-select v-model="form.qu" placeholder="区/县" class="qu">
                            <el-option label="区/县" value=""></el-option>
                            <el-option label="雁塔区" value=""></el-option>
                        </el-select>
                        <el-select v-model="form.jie" placeholder="乡镇/街道" class="jie">
                            <el-option label="乡镇/街道" value=""></el-option>
                            <el-option label="街道" value=""></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="详细地址" required prop="address">
                        <el-input v-model="form.address" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-main" @click="sampleSubmit">提交申请</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import api from "@/api/product";
import commonApi from "@/api/common";
import factoryApi from "@/api/factory";
export default {
    data() {
        return {
            dialogSqVisible: false,
            form: {
                goods_id: null,
                goods_models: null,
                goods_num: 1,
                goods_sku_id: null,
                goods_sku_name: null,
                province_id: null,
                city_id: null,
                county_id: null,
                town_id: null
            },
            applyType: [],
            customFactory: [],
            customGoods: [],
            customSku: [],
            provinceList: [],
            addAddressCityList: [], // 市
            addAddressCountyList: [], // 区县
            addAddressTownList: [], // 街道
        }
    },
    mounted: function () {
        this.LoadFactoryList();
        this.LoadProvinceList();
        this.LoadApplyType();
    },
    methods: {
        openSampleDialog: function () {
            this.dialogSqVisible = true;
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            }
        },
        // 申请提交
        sampleSubmit: function () {
            this.$refs.form.validate((val) => {
                if (val) {
                    this.form.goods_sku_name = this.customSku.find(x => x.id == this.form.goods_sku_id).difference;
                    this.form.factory_name = this.customFactory.find(x => x.id == this.form.factory_id).name;
                    api.AddApply(this.form)
                        .then((res) => {
                            this.$message.success("成功提交");
                            this.dialogSqVisible = false;
                        })
                }
            })
        },
        // 加载授权厂商
        LoadFactoryList: function () {
            var _this = this;
            factoryApi.GetFactoryList({})
                .then((res) => {
                    _this.customFactory = res.data;
                })
        },
        // 加载申请类型
        LoadApplyType: function () {
            api.GetApplyType()
                .then((res) => {
                    this.applyType = res.data;
                })
        },
        // 切换企业
        switchFactory: function (val) {
            var input = {
                factory_id: val
            }
            this.$refs.goods_id.resetField();
            this.$refs.goods_models.resetField();
            this.$refs.goods_sku_id.resetField();
            this.customSku = [];
            factoryApi.GetFactoryGoodsList(input)
                .then((res) => {
                    this.customGoods = res.data;
                })
        },
        // 切换商品
        switchGoods: function (val) {
            var goods = this.customGoods.find(x => x.id == val);
            this.form.goods_models = goods.models;
            this.form.goods_title = goods.title;
            this.$refs.goods_sku_id.resetField();
            this.customSku = goods.sku;
        },
        // 加载省份数据
        LoadProvinceList: function () {
            var _this = this;
            commonApi.GetAllProvinces()
                .then((res) => {
                    _this.provinceList = res.data;
                })
        },
        // 加载城市数据
        LoadAllProvincesList: function (type, id) {
            var input = {
                type: type,
                id: id
            }
            commonApi.GetAllProvinces(input)
                .then((res) => {
                    if (type == "city") {
                        this.addAddressCityList = res.data;
                        this.addAddressCountyList = [];
                        this.addAddressTownList = [];
                        this.$refs.city_id.resetField();
                        this.$refs.county_id.resetField();
                    } else if(type == "county") {
                        this.addAddressCountyList = res.data;
                        this.addAddressTownList = [];
                        this.$refs.county_id.resetField();
                    } else if (type == "town") {
                        this.addAddressTownList = res.data;
                    }

                    this.$refs.town_id.resetField();
                })
        },
        // 切换省份
        ProvinceChangeHandler: function (val) {
            this.LoadAllProvincesList("city", val)
        },
        // 改变市
        CityChangeHandler: function (val) {
            this.LoadAllProvincesList("county", val)
        },
        // 改变区县
        CountyChangeHandler: function (val) {
            this.LoadAllProvincesList("town", val)
        },
    }
}
</script>